<template>
  <Layout style="height: 100%" class="main">
    <Sider hide-trigger collapsible :width="256" :collapsed-width="64" v-model="collapsed" class="left-sider"
           :style="{overflow: 'hidden'}">
      <side-menu accordion ref="sideMenu" :active-name="$route.name" :collapsed="collapsed" @on-select="turnToPage"
                 :menu-list="menuList">
        <!-- 需要放在菜单上面的内容，如Logo，写在side-menu标签内部，如下 -->
        <div class="logo-con">
          <img v-show="!collapsed" :src="maxLogo" key="max-logo"/>
          <img v-show="collapsed" :src="minLogo" key="min-logo"/>
        </div>
      </side-menu>
    </Sider>
    <Layout>
      <Header class="header-con">
        <header-bar :collapsed="collapsed" @on-coll-change="handleCollapsedChange">
          <user @on-user="onUser" :user-avator="userAvator" :userName="userName"/>
          <language v-if="$config.useI18n" @on-lang-change="setLocal" style="margin-right: 10px;" :lang="local"/>
          <fullscreen v-model="isFullscreen" style="margin-right: 10px;"/>
          <lock STYLE="margin-right: 10px"></lock>
          <search v-if="$config.useSearch" style="margin-right: 10px;"></search>
        </header-bar>
      </Header>
      <Content class="main-content-con">
        <Layout class="main-layout-con">
          <div class="tag-nav-wrapper">
            <tags-nav ref="tags" :value="$route" @input="handleClick" :list="tagNavList" @on-refresh="fresh"
                      @on-close="handleCloseTag"/>
          </div>
          <Content class="content-wrapper" style="position: relative">
            <Spin fix v-if="loading">
               <span>
                  <Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
                  <span> 数据加载中，请稍后</span>
             </span>
            </Spin>
            <keep-alive :include="cacheList">
              <transition :name="transitionName">
                <router-view :key="key"></router-view>
              </transition>
            </keep-alive>
          </Content>
          <footer class="footer">© 2019 saver Copyright</footer>
        </Layout>
      </Content>
    </Layout>
  </Layout>
</template>
<script>
import DragDrawer from '_c/drag-drawer'
import SideMenu from './components/side-menu'
import HeaderBar from './components/header-bar'
import TagsNav from './components/tags-nav'
import User from './components/user'
import search from './components/search'
import lock from './components/lock'
import Fullscreen from './components/fullscreen'
import Language from './components/language'
import { mapMutations, mapActions, mapGetters } from 'vuex'
import { getNewTagList, getNextRoute, routeEqual } from '@/libs/util'
import routers from '@/router/routers'
import minLogo from '@/assets/images/logo-min.png'
import maxLogo from '@/assets/images/logo.png'
import './main.less'

export default {
  name: 'Main',
  components: {
    SideMenu,
    HeaderBar,
    Language,
    TagsNav,
    Fullscreen,
    User,
    DragDrawer,
    search,
    lock
  },
  data () {
    return {
      transitionName: 'slide-right',
      activeDate: 1,
      collapsed: false,
      minLogo,
      maxLogo,
      isFullscreen: false,
      showWindowBDrawer: false,
      showBDrawer3: false,
      placement: false
    }
  },
  computed: {
    ...mapGetters([
      'messageUnreadCount'
    ]),
    loading () {
      return this.$store.state.app.loading
    },
    key () {
      return this.activeDate + this.$route.name
    },
    tagNavList () {
      return this.$store.state.app.tagNavList
    },
    tagRouter () {
      return this.$store.state.app.tagRouter
    },
    userAvator () {
      return this.$store.state.user.avatorImgPath
    },
    userName () {
      return this.$store.state.user.userName
    },
    cacheList () {
      return ['ParentView', ...this.tagNavList.length ? this.tagNavList.filter(item => !(item.meta && item.meta.notCache)).map(item => item.name) : []]
    },
    menuList () {
      return this.$store.getters.menuList
    },
    local () {
      return this.$store.state.app.local
    },
    hasReadErrorPage () {
      return this.$store.state.app.hasReadErrorPage
    }
  },
  methods: {
    ...mapMutations([
      'setBreadCrumb',
      'setTagNavList',
      'addTag',
      'setLocal',
      'setHomeRoute'
    ]),
    ...mapActions([
      'handleLogin'
    ]),
    fresh () {
      this.activeDate = new Date().getTime()
    },
    turnToPage (route) {
      let { name, params, query } = {}
      if (typeof route === 'string') name = route
      else {
        name = route.name
        params = route.params
        query = route.query
      }
      if (name.indexOf('isTurnByHref_') > -1) {
        window.open(name.split('_')[1])
        return
      }
      if (name !== this.$route.name) {
        this.$router.push({
          name,
          params,
          query
        })
      }
    },
    onUser () {
      let r = {
        name: 'userCenter'
      }
      this.$router.push(r)
    },
    handleCollapsedChange (state) {
      this.collapsed = state
    },
    handleCloseTag (res, type, route) {
      if (type === 'all') {
        this.turnToPage(this.$config.homeName)
      } else if (routeEqual(this.$route, route)) {
        if (type !== 'others') {
          const nextRoute = getNextRoute(this.tagNavList, route)
          this.$router.push(nextRoute)
        }
      }
      this.setTagNavList(res)
    },
    handleClick (item) {
      this.turnToPage(item)
    }
  },
  watch: {
    '$route' (to, from) {
      let t = -1
      let f = -1
      let temp = this.$store.state.app.tagNavList
      temp.forEach((item, index) => {
        if (from.name === item.name) {
          f = index
        }
        if (to.name === item.name) {
          t = index
        }
      })
      if (t === -1) {
        this.transitionName = 'slide-right'
      } else {
        this.transitionName = t > f ? 'slide-right' : 'slide-left'
      }
      const { name, query, params, meta } = to
      this.addTag({
        route: { name, query, params, meta },
        type: 'push'
      })
      this.setBreadCrumb(to)
      this.setTagNavList(getNewTagList(this.tagNavList, to))
      this.$refs.sideMenu.updateOpenName(to.name)
    }
  },
  mounted () {
    this.setTagNavList()
    this.setHomeRoute(routers)
    this.addTag({
      route: this.$store.state.app.homeRoute
    })
    this.setBreadCrumb(this.$route)
    // 设置初始语言
    this.setLocal(this.$i18n.locale)
    // 如果当前打开页面不在标签栏中，跳到homeName页
    if (!this.tagNavList.find(item => item.name === this.$route.name)) {
      this.$router.push({
        name: this.$config.homeName
      })
    }
  }
}
</script>
<style scoped>
  .demo-spin-icon-load {
    animation: ani-demo-spin 1s linear infinite;
  }
</style>
